<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name = "format-detection" content="telephone = no" />

    <link rel="stylesheet" href="/static/css/app/shareDynamics/shareD.css">
    <script src="/static/js/app/shareDynamics/common/flexible.js"></script>
    <link rel="stylesheet" href="/static/css/app/shareDynamics/radiobo.css">
    <script src="/static/js/app/shareDynamics/common/jquery-1.11.1.min.js"></script>
    <script src="/static/js/app/shareDynamics/common/clipboard.min.js"></script>
    <script src="/static/js/app/shareDynamics/util.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <title>的动态</title>
    <style>
        iframe:not(.huakai_iframe) {display:none !important;}
        html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        /*头部定位*/
        .h_top{
            width: 100%;
            height: 1.5rem;
            background: rgba(0,0,0,0.8);
            position: fixed;
            bottom:0;
            z-index: 9;
            left: 0;
        }
        .h_top .logo{
            height:1.1rem;
            float: left;
        }
        .h_top .logo img{
            width: 1.3rem;
            height: 1.3rem;
            float: left;
            margin-top: 0.1rem;
            margin-left: 0.2rem;
        }
        .h_top dl{
            float: left;
            margin-left: 0.2rem;
            margin-top: 0.25rem;
        }
        .h_top dt , .h_top dd{
            font-size: 0.3rem;
            color: #fff;
            line-height: 0.5rem;

        }
        .h_top a{
            display: block;
            float: right;
            margin-right: 0.24rem;
            height: 0.7rem;
            padding: 0.15rem 0.5rem;
            color: #fff;
            line-height: 0.7rem;
            font-size: 0.4rem;
            text-decoration: none;
            background: #f05c5c;
            border-radius: 0.5rem;
            margin-top: 0.25rem;
        }
        .hide{display: none}
        .zhezhao{ width: 100%;height:100%;position: fixed;top: 0;left: 0;z-index: 100;}
        .zhezhao>img{width: 100%;height: 100%;}
    </style>
</head>
<body>
<script src="/static/js/common/Monitor.js"></script>
    <div class="dynamics">
        <div class="zhezhao" style="display: none;"><img src="/static/img/app/shareDynamics/mask.png" alt=""></div>
        <div class="dyn-1">
            <div class="con">
                <div class="con-head">
                    <div>
                        <img class="pichead" src="" alt="">
                        <p><b id="nickName"></b><img id="sex" src="" alt=""><span id="age"></span></p>
                        <p><strong id="createdDate"></strong><img class="dress" src="/static/img/app/shareDynamics/positionpic.png" alt=""><strong id="address"></strong></p>
                    </div>
                    <span class="attention">关注</span>
                </div>
                <div class="con-main">
                    <p id="dynamicText"></p>
                    <div id="firstPlant" class="radioM firstPlant" style=" cursor: pointer;">
                        <div class="radiobg">
                            <div class="radio-pic">
                                <img class="mohu" src="" alt="">
                                <a href="javascript:;" style="cursor: pointer" class="play"><img style="cursor: pointer" src="/static/img/app/shareDynamics/play.png" alt=""></a>
                            </div>
                            <div id="colorfulPulse" class="colorfulPulse">
                                <span class="item-1"></span>
                                <span class="item-2"></span>
                                <span class="item-3"></span>
                                <span class="item-4"></span>
                                <span class="item-5"></span>
                                <span class="item-6"></span>
                                <span class="item-7"></span>
                                <span class="item-8"></span>
                                <span class="item-9"></span>
                                <span class="item-1"></span>
                                <span class="item-2"></span>
                                <span class="item-3"></span>
                                <span class="item-4"></span>
                                <span class="item-5"></span>
                                <span class="item-6"></span>
                                <span class="item-7"></span>
                                <span class="item-8"></span>
                                <span class="item-9"></span>
                                <span class="item-1"></span>
                                <span class="item-2"></span>
                                <span class="item-3"></span>
                                <span class="item-4"></span>
                            </div>
                            <p id="times" class="times"></p>
                        </div>
                    </div>
                    <!--<input type="button" value="播放" id="play">-->
                    <audio class="bgMusic"  loop="loop">
                        <source src="" type="audio/mp3">
                    </audio>
                    <div class="dynamicText-pic">

                    </div>
                </div>
                <div class="con-icon">
                    <div class="icon1"><img src="/static/img/app/shareDynamics/eyes.png" alt=""><b class="count-1">999</b></div>
                    <div class="icon2"><img src="/static/img/app/shareDynamics/share.png" alt=""><b class="count-2">0</b></div>
                    <div class="icon3"><img class="talking" src="/static/img/app/shareDynamics/talking.png" alt=""><b class="count-3">0</b></div>
                    <div class="icon4"><img class="heart" src="/static/img/app/shareDynamics/haret.png" alt=""><span class="count-4">12</span></div>
                    <div class="icon5"><img class="gift" src="/static/img/app/shareDynamics/gift.png" alt=""><b class="count-5">0</b></div>
                </div>
            </div>
        </div>
        <h1>热门动态</h1>
        <div class="dyn-1 dyn-2">

        </div>
        <div class="h_top btn" onclick="">
            <div class="logo">
                <img src="/static/img/app/shareDynamics/logo.png" alt="">
                <dl>
                    <dt>花开</dt>
                    <dd>可以和附近的人视频聊天哦！</dd>
                </dl>
            </div>
            <a href="javascript:;" >点击下载</a>
        </div>
        <div class="tanc hide">
            <div class="tanc-con">
                <img src="/static/img/app/shareDynamics/logo.png" alt="">
                <p>请先下载App哦</p>
                <span class="btn" onclick=""><a href="javascript:;">点击下载</a></span>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//www.shareinstall.net/js/page/shareinstall-h5.min.js"></script>
    <script>
        //变量引进
        var accessId = getParameter("x-access-id");
        var accessToken = getParameter("x-access-token");
        var dynamicId = getParameter("dynamicId");
        var ua = "h5";
        var parameter=window.location.href.split("?")[1];
        $(function () {
        //    动态详情
            personal();
            // 复制到剪切板
            copy();
            //点击头像出现弹窗
            $(".pichead,.talking,.heart,.attention,.gift").click(function () {
                $(".tanc").removeClass("hide")
            })
        });
        function personal() {
            var data={
                "dynamicId":dynamicId
            };
            jsonAjax(genUrl("/h5/dynamic/share/detail"),'GET',data,shareDetail);
        }
        function shareDetail(res){
            if(res.code==0){
                // 数据填充
                fillData(res);
                audioPlay()
            }else{
                console.log("动态详情查询错误:"+res.message);
            }
        }
        function fillData(res){
            var dynamicShare=res.data.dynamicShare;
            $("#firstPlant").attr("data-vTime",dynamicShare.voiceTime)
            //   个人信息
            $("#nickName").html(dynamicShare.nickName);
            $('title').html(dynamicShare.nickName+'的动态');
            $(".pichead").attr("src",dynamicShare.photo);
            $(".mohu").attr("src",dynamicShare.voiceBackgroudImageUrl);
            $("#age").html(dynamicShare.age);
            // 创建时间
            $("#createdDate").html(dynamicShare.createTime);
            // 定位地址
            if(dynamicShare.city){
                $("#address").html(dynamicShare.city);
            }
            $("#times").html(timeFix(dynamicShare.voiceTime));
            // 动态内容：
            $("#dynamicText").html(dynamicShare.dynamicText);
            // 音乐播放
            $(".bgMusic").attr("src",dynamicShare.voiceUrl);
            // 性别
            if(dynamicShare.sex=="0"){
                $("#sex").attr("src","img/sexpic.png")
            }else{
                $("#sex").attr("src","img/nan.png")
            }
            if(!dynamicShare.voiceUrl){
                $(".firstPlant").hide()
            }
            // 图文
            var str="";
            if(dynamicShare.imgUrl){
                str+='<ul class="photo">';
                if(dynamicShare.imgUrl.imgUrls && dynamicShare.imgUrl.imgUrls.length>0){
                    for(var j=0;j<dynamicShare.imgUrl.imgUrls.length;j++){
                        str+='<li><img src='+dynamicShare.imgUrl.imgUrls[j]+' alt=""></li>'
                    }
                }
                str+='</ul>';
            }
            $(".dynamicText-pic").html(str);
            // 各类点评
            $(".count-1").html(dynamicShare.pageViewCount);
            $(".count-2").html(dynamicShare.shareCount);
            $(".count-3").html(dynamicShare.reviewCount);
            $(".count-4").html(dynamicShare.pageViewCount);
            $(".count-5").html(dynamicShare.giftCount);
            // 热门动态
            var dynamicHotList=res.data.dynamicHotList;
            if(dynamicHotList && dynamicHotList.length>0){
                var str="";
                for(var i=0;i<dynamicHotList.length;i++){
                    var item=dynamicHotList[i];
                    str+='<div class="con">';
                    str+='<div class="con-head">';
                    str+='<div>';
                    str+='<img class="pichead" src="'+item.photo+'" alt="">';
                    str+='<p><b>'+item.nickName+'</b>';
                    // 性别
                    if(item.sex=="0"){
                        str+='<img src="/static/img/app/shareDynamics/sexpic.png" alt="">';
                    }else{
                        str+='<img src="/static/img/app/shareDynamics/nan.png" alt="">';
                    }
                    str+='<span>'+item.age+'</span></p>';
                    str+='<p><strong>'+item.createTime+'</strong>';
                    if(item.city){
                        str+= '<img class="dress" src="/static/img/app/shareDynamics/positionpic.png" alt=""><strong>'+item.city+'</strong>'
                    }
                    str+='</p>';
                    str+='</div>';
                    str+='<span class="attention">关注</span>';
                    str+='</div>';
                    str+='<div class="con-main">';
                    str+='<p>'+item.dynamicText+'</p>';
                    // 图文
                    if(item.imgUrl){
                        str+='<ul class="photo">';
                        if(item.imgUrl.imgUrls && item.imgUrl.imgUrls.length>0){
                            for(var j=0;j<item.imgUrl.imgUrls.length;j++){
                                str+='<li><img src='+item.imgUrl.imgUrls[j]+' alt=""></li>'
                            }
                        }
                        str+='</ul>';
                    }
                    // 语音文
                    if(item.voiceUrl){
                        str+='<div class="radioM" style=" cursor: pointer;" data-vTime="'+item.voiceTime+'">';
                        str+='<div class="radiobg">';
                        str+='<div class="radio-pic">';
                        str+='<img class="mohu" src="'+item.photo+'" alt="">';
                        str+='<a href="javascript:;" style="cursor: pointer" class="play"><img style="cursor: pointer" src="/static/img/app/shareDynamics/play.png" alt=""></a>';
                        str+='</div>';
                        str+='<div id="colorfulPulse" class="colorfulPulse">';
                        str+='<span class="item-1"></span>';
                        str+='<span class="item-2"></span>';
                        str+='<span class="item-3"></span>';
                        str+='<span class="item-4"></span>';
                        str+='<span class="item-5"></span>';
                        str+='<span class="item-6"></span>';
                        str+='<span class="item-7"></span>';
                        str+='<span class="item-8"></span>';
                        str+='<span class="item-9"></span>';
                        str+='<span class="item-1"></span>';
                        str+='<span class="item-2"></span>';
                        str+='<span class="item-3"></span>';
                        str+='<span class="item-4"></span>';
                        str+='<span class="item-5"></span>';
                        str+='<span class="item-6"></span>';
                        str+='<span class="item-7"></span>';
                        str+='<span class="item-8"></span>';
                        str+='<span class="item-9"></span>';
                        str+='<span class="item-1"></span>';
                        str+='<span class="item-2"></span>';
                        str+='<span class="item-3"></span>';
                        str+='<span class="item-4"></span>';
                        str+='</div>';
                        str+='<p id="times" class="times">'+timeFix(item.voiceTime)+'</p>';
                        str+='</div>';
                        str+='</div>';
                        str+='<audio class="bgMusic"  loop="loop">';
                        str+='<source src="'+item.voiceUrl+'" type="audio/mp3">';
                        str+='</audio>';
                    }
                    str+='</div>';
                    str+='<div class="con-icon">';
                    str+='<div class="icon1"><img src="/static/img/app/shareDynamics/eyes.png" alt=""><b>'+item.pageViewCount+'</b></div>';
                    str+='<div class="icon2"><img src="/static/img/app/shareDynamics/share.png" alt=""><b>'+item.reviewCount+'</b></div>';
                    str+='<div class="icon3"><img class="talking" src="/static/img/app/shareDynamics/talking.png" alt=""><b>'+item.pageViewCount+'</b></div>';
                    str+='<div class="icon4"><img class="heart" src="/static/img/app/shareDynamics/haret.png" alt=""><span>'+item.pageViewCount+'</span></div>';
                    str+='<div class="icon5"><img class="gift" src="/static/img/app/shareDynamics/gift.png" alt=""><b>'+item.giftCount+'</b></div>';
                    str+='</div>';
                    str+='</div>';
                }
                $(".dyn-2").append(str)
                //  播放器
            }
        }
        // 播放器
        function audioPlay() {
            $(".dynamics").find(".con>.con-main>.radioM").each(function () {
                var _this=$(this);
                getTime();
                function getTime() {
                    setTimeout(function () {
                        var duration = parseInt(_this.attr("data-vtime"));
                        if(isNaN(duration)){
                            getTime();
                        }else{
                            // 设置初始时间
                            var audio=_this.parent().children("audio");
                            var img=_this.find(".play");
                            _this.find(".times").html(timeFix(duration));
                            var timer;
                            img.click(function () {
                                if(audio[0].paused){
                                    _this.find(".times").html(timeFix(duration));
                                    _this.find(".play>img").attr("src","img/pasule.png");
                                    _this.find(".colorfulPulse>span").addClass("animates");
                                    _this.find(".radio-pic").children("img").removeClass("mohu");
                                    var durationT=duration;
                                    play(audio);
                                    timer= setInterval(function () {
                                        if(durationT>0){
                                            durationT--;
                                            _this.find(".times").html(timeFix(durationT));
                                        }else{
                                            clearInterval(timer);
                                            _this.find(".times").html(timeFix(duration));
                                        }
                                    },1000);
                                }else{
                                    _this.find(".play>img").attr("src","img/play.png");
                                    _this.find(".colorfulPulse>span").removeClass("animates");
                                    _this.find(".radio-pic").children("img").addClass("mohu");
                                    clearInterval(timer);
                                    pause(audio);
                                }
                            })
                        }
                    }, 100);
                }
            })
        }
    //  时间处理
        function timeFix(number){
            var sec=parseInt(number/60);
            var s=parseInt(number%60)<10 ? '0'+parseInt(number%60) : parseInt(number%60);
           return  sec+":"+s
        }
        // 复制到剪切板
        function copy() {
          var shareCustomerId=getParameter("dynamicId");
          var shareId=getParameter("shareId");
          var ua = navigator.userAgent.toLowerCase();
          var and_ios = "";
          if (/iphone|ipad|ipod/.test(ua)) {

              and_ios = "iphone";
          } else if (/android/.test(ua)) {
              and_ios = "android";
          }
          if (ua.match(/MicroMessenger/i) == 'micromessenger' && and_ios == "iphone") {
              $('.iosweixin').show();
          }

          //剪切板复制
          var clipboard = new Clipboard('.btn', {
              text: function() {
                  return shareId;//文本
              }
          });
          clipboard.on('success', function(e) {
              console.log(and_ios);
              if(and_ios == "iphone"){
                  if(isTengxun()){
                      $(".zhezhao").show();
                      return
                  }
                  window.location.href="../workspace/guide/index.html?"+parameter;
              }else{
                  // shareinstall
                  var data = ShareInstall.parseUrlParams();//shareinstall.js中提供的工具函数，解析url中的所有查询参数
                  data.appkey="BABK7E6KAKBEFH";
                  var shareSdk = new ShareInstall({
                      appKey : 'BABK7E6KAKBEFH',
                      onready : function() {// 回调成功
                          var m = this;
                          m.schemeWakeup();
                          m.wakeupOrInstall();
                      }
                  }, data);
                 // window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.ms.flowerlive";
              }
          });
          clipboard.on('error', function(e) {
              if(and_ios == "iphone"){
                  if(isTengxun()){
                      $(".zhezhao").show();
                      return
                  }
                  window.location.href="../workspace/guide/index.html?"+parameter;
              }else{
                  // shareinstall
                  var data = ShareInstall.parseUrlParams();//shareinstall.js中提供的工具函数，解析url中的所有查询参数
                  data.appkey="BABK7E6KAKBEFH";
                  var shareSdk = new ShareInstall({
                      appKey : 'BABK7E6KAKBEFH',
                      onready : function() {// 回调成功
                          var m = this;
                          m.schemeWakeup();
                          m.wakeupOrInstall();
                      }
                  }, data);
                 // window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.ms.flowerlive";
              }
          });
          /**
           * 是否在微信qq内置浏览器
           * @returns {boolean}
           */
          var isTengxun = function(){
              var ua = navigator.userAgent.toLowerCase();
              if(ua.match(/MicroMessenger/i)=="micromessenger"||ua.match(/WeiBo/i) == "weibo" || ua.match(/qq\//i) == "qq/") {
                  return true;
              }
              return false;
          }
      }



        function pause(audio) {
            // 停止
            audio[0].pause();
            audio[0].load()
            audio.value="暂停";
        }
        function play(audio) {
            // 播放
            audio[0].play();
            audio.value="播放";

        }
    </script>
</body>
</html>